import {Col, Form, Input, message, Modal, Row, Spin,DatePicker,Select} from "antd";
import React from "react";
import axios from "../../../../components/service/request";

const EditModal = ({isModalVisible, cancelModal, value, reload, baseUir}) => {

  //确认框的加载状态、旋转加载的状态、模块选项的值和模块选项的更新函数 定义初始状态
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [spinLoading, setSpinLoading] = React.useState(false);
    const [title, setTitle] = React.useState("实验预约发布");
    const [form] = Form.useForm();

    React.useEffect(() => {
        if (isModalVisible) {
            setSpinLoading(true)
            if (value) {
                setTitle("实验发布信息")
                form.setFieldsValue({
                    id: value.id,
                    tiliteName: value.tiliteName,
                    location: value.location,
                    peopleMin: value.peopleMin, 
                    peopleMax: value.peopleMax,
                    stime: value.stime,
                    etime: value.etime,
                    type: value.type,
                });
                    
            }
            setSpinLoading(false)
        }
    }, [form, isModalVisible, value]);

    //编辑时 保存按钮方法
    const handleOk = () => {
        setConfirmLoading(true)
        form.validateFields()
            .then((values) => {
                form.resetFields();
                axios.post(baseUir+"/save", values).then(res => {
                    if (res.code === 200) {
                        message.info(res.msg)
                        cancelModal()
                        reload()
                    }  else {
                        message.info(res.msg)
                    }
                })
            })
        setConfirmLoading(false)
    }
    //编辑时取消按钮方法
    const handleCancel = () => {
        form.resetFields()
        cancelModal()
    }

    return (
       < Modal title={title}
               visible={isModalVisible}
               onOk={handleOk}
               onCancel={handleCancel}
               okText={'发布'}
               confirmLoading={confirmLoading}
               cancelText={'取消'}
               width={800}
        >
            <Spin spinning={spinLoading}>
                <Form form={form}
                      labelAlign={'right'}
                      layout={'vertical'}
                >
                    <Form.Item name="id" hidden={true}>
                        <Input/>
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="tiliteName" label="实验名称" rules={[{required: true,message: "必须填写实验名称！"}]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item name="location" label="实验地点" rules={[{ required: true, message: "必须填写实验地点！" }]}>
                                {
                                        <Input/>
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                        <Form.Item name="peopleMin" label="人数下限"
                          rules={[
                                {
                                    required: true,
                                    message: "必须填写人数下限！"
                                }
                                ]}>
                                {
                                    <Input  type="number" min="1" max="500"/>
                                }
                            </Form.Item>
                          </Col>
                          <Col span={12}>
                        <Form.Item name="peopleMax" label="人数上限"
                        rules={[
                          {
                              required: true,
                              message: "必须填写人数上限！"
                          }
                          ]}>
                                {
                                    <Input type="number" max="500"
                                    />
                                }
                            </Form.Item>
                          </Col>
                          <Col span={12}>
                            <Form.Item name="stime" label="开始时间"  
                             rules={[
                                    {
                                        required: true,
                                        message: "必须填写开始时间！"
                                    }
                                ]}>
                                {
                                    <DatePicker showTime
                                        style={{ width: '100%' }}/>  
                                }
                            </Form.Item>
                          </Col>
                          <Col span={12}>
                          <Form.Item name="etime" label="结束时间"
                          rules={[
                                    {
                                        required: true,
                                        message: "必须填写结束时间！"
                                    }
                                ]}>
                                {
                                    <DatePicker showTime
                                        style={{ width: '100%' }}/>  
                                }
                               
                            </Form.Item>
                          </Col>
                          <Col span={12}>
                            <Form.Item name="type" label="可预约用户类型">
                            {                                   
                              <Select
                              placeholder="请选择可预约用户类型"
                              style={{width: '100%'}}
                              allowClear
                              optionLabelProp="label"
                          >
                              <option value="0" label="本科生" >本科生</option>
                              <option value="1" label="研究生" >研究生</option>
                          </Select>                                      
                                 }
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Spin>

        </Modal>
    );

}

export default EditModal;
